<template>
	<div class="tabMatch">
		<Row :gutter="16">
			<i-col span="24">
				<Tag v-for="item in tabs" color="green" :key="item" :name="item" type="dot" closable @on-close="tabClose">{{item}}</Tag>
				<Input v-model="newtab" icon="ios-plus-empty" placeholder="添加标签" @on-keyup.enter="tabAdd()" style="width: 150px"></Input>
			</i-col>
		</Row>
		<Row :gutter="16">
			<i-col span="24">
				<Card>
					<p slot="title">网站添加</p>
					<p class="addwebp">
						<Input v-model="newweb" icon="ios-plus-empty" @on-keyup.enter="webAdd" placeholder="添加网站名字"></Input>
					</p>
					<p class="addwebb">
						<Button type="primary" icon="checkmark-round" @click="webAdd"> 确定</Button>
					</p>
				</Card>
			</i-col>
		</Row>
		<Row :gutter="16">
			<i-col span="24">
				<Card v-for="item in webs">
					<p slot="title">
						{{item.title}}
						<a class="webClose" @click="webClose(item.title)"><Icon type="close"></Icon></a>
					</p>
					<div v-for="xtem in item.column" class="column">
						<div class="titletab">{{xtem.title}}</div>
						<Select v-model="xtem.tab" class="selectTab" multiple>
							<Option v-for="tab in tabs" :value="tab" :key="tab">{{ tab }}</Option>
						</Select>
						<a class="columeClose" @click="columeClose(item.title,xtem.title)"><Icon type="close"></Icon></a>
					</div>
					<p>
						<Input v-model="item.newcolumn" icon="ios-plus-empty" placeholder="添加网站栏目" @on-keyup.enter="columnAdd(item.title)"></Input>
					</p>
				</Card>
			</i-col>
		</Row>
		<Modal v-model="modal" width="360">
			<p slot="header" style="color:#f60;text-align:center">
				<Icon type="information-circled"></Icon>
				<span>确认删除{{closeweb}}？</span>
			</p>
			<div style="text-align:center">
				<p>删除之后网站对应的栏目也会消失！</p>
				<p>是否继续操作？</p>
			</div>
			<div slot="footer">
				<Button type="error" size="large" long @click="delweb">删除</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
export default {
	name: 'tabMatch',
	data () {
		return {
			newtab:'',
			modal:false,
			tabs: ['心理', '科技', '世界'],
			newweb:'',
			closeweb:'',
			webs:[
			{
				title:'工大学子',
				newcolumn:'',
				column:[
				{
					title:'健康心理',
					tab:['心理']
				},
				{
					title:'快乐心理',
					tab:['心理']
				},
				]
			},
			],
		}
	},
	methods: {
		tabAdd () {
			if (this.newtab!='') {
				this.tabs.push(this.newtab);
				this.newtab=''
			}
		},
		columnAdd(index){
			for(let item of this.webs){
				if (item.title==index) {
					if (item.newcolumn!='') {
						let newcol={
							title:item.newcolumn,
							tab:[]
						};
						item.column.push(newcol);
						item.newcolumn=''
					}
				}
			}
		},
		webAdd(){
			if (this.newweb!='') {
				let xweb={
					title:this.newweb,
					newcolumn:'',
					column:[]
				};
				this.webs.unshift(xweb);
				this.newweb=''
			}
		},
		webClose(index){
			this.closeweb=index;
			this.modal=true;
			
		},
		delweb(){
			let i=0;
			for(let item of this.webs){
				if (item.title==this.closeweb) {
					this.webs.splice(i, 1);
					this.modal=false
				}
				i++;
			}
		},
		columeClose(x,y){
			for(let item of this.webs){
				if (item.title==x) {
					let i=0
					for(let xtem of item.column){
						if (xtem.title==y) {
							item.column.splice(i, 1);
						};
						i++;
					}
				}
			}
		},
		tabClose (event, name) {
			const index = this.tabs.indexOf(name);
			this.tabs.splice(index, 1);
		}
	}
}
</script>

<style lang="css" scoped>
.tabMatch{
	width: 100%;
	height: 100%
}
.tabMatch .ivu-card{
	margin-top: 20px
}
.tabMatch .column{
	margin-bottom: 15px;
	position: relative;
}
.tabMatch .selectTab{
	width: 300px;
	position: relative;
	left: 100%;
	margin-left: -345px;
	margin-top: -10px
}
.tabMatch .titletab{
	height: 10px;
	line-height: 30px;
}
.tabMatch .addwebp{
	margin-bottom: 15px
}
.tabMatch .addwebb{
	text-align: right;
	margin-right: 20px
}
.tabMatch .webClose{
	font-size: 20px;
	float: right;
	margin-top: 2px;
	margin-right: 10px
}
.tabMatch .columeClose{
	float: right;
	margin-right: 10px;
	margin-top: -3px
}
</style>